<template>
  <CommonCard title="累计用户数" value="117,789,5">
    <div ref="barChartRef" style="width: 100%; height: 100%"></div>
    <template #footer>
      <div class="compare-wrap">
        <div class="compare">
          <span>日同比</span>
          <span class="emphasis">17.16%</span>
          <span class="increment"></span>
        </div>
        <div class="compare">
          <span>月同比</span>
          <span class="emphasis">47.67%</span>
          <span class="decrement"></span>
        </div>
      </div>
    </template>
  </CommonCard>
</template>

<script lang="ts">
import CommonCard from "./CommonCard.vue"
export default {
  name: "TodaySales",
  components: { CommonCard },
}
</script>

<script lang="ts" setup>
import * as echarts from "echarts"
import { ref, onMounted } from "vue"
import type { EChartsType } from "echarts"

const barChartRef = ref(null)

let myChart: EChartsType

// 让代码在读取时不要执行，因为还没有拿到dome元素
// 所以包装成函数返回值的形式，在页面挂载完成时调用，获取数据
const getOption = () => {
  return {
    xAxis: {
      boundaryGap: false, // 两侧不留空白

      show: false,
      min: 0,
      max: 100,
    },
    yAxis: {
      show: false,
      data: ["数据"],
    },
    series: [
      {
        type: "bar",
        data: [42],
        barWidth: 10,
        label: {
          show: true,
          formatter: "|",
          position: "right",
        },
        // 显示柱条的背景颜色
        showBackground: true,
        // 柱条的颜色
        itemStyle: {
          color: "orangered",
        },
      },
    ],

    grid: {
      left: "10px",
      right: "10px",
    },
    tooltip: {
      trigger: "axis",
      confine: true,
    },
  }
}

// 1. 当页面组件挂载完毕的时候 才要使用数据生成对应的图形
onMounted(() => {
  myChart = echarts.init(barChartRef.value)
  myChart.setOption(getOption())

  // 当浏览器宽度发生变化的时候，图表也要发生变化
  window.addEventListener("resize", () => {
    myChart && myChart.resize()
  })
})
</script>

<style lang="scss" scoped>
.compare-wrap {
  height: 100%;
  font-size: 12px;
  color: #666;
  display: flex;
  .compare {
    flex: 1;
    display: flex;
    align-items: center;
  }
}
</style>
